<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属栏目" prop="categoryId">
            <treeselect
              v-model="form.categoryId"
              :options="categoryOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择所属栏目"
              style="width:500px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文章标题" prop="website">
            <el-input v-model="form.title" placeholder="请输入文章标题" style="width: 500px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权重" prop="weight">
            <el-input v-model="form.weight" placeholder="请输入权重" style="width: 500px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="点击" prop="clicks">
            <el-input v-model="form.clicks" placeholder="请输入点击" style="width: 500px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="自定义属性" prop="pross">
            <el-checkbox-group v-model="pross" >
              <el-checkbox
                v-for="dict in dict.type.cms_article_properties"
                :key="dict.value"
                :label="dict.value">
                {{dict.label}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="缩略图" prop="imagePath">
            <ImageUploadCms v-model="form.imagePath" ></ImageUploadCms>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标签" prop="tag">
            <el-input v-model="form.tag" placeholder="请输入文章标题" style="width: 500px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容摘要" prop="description">
            <el-input v-model="form.description" placeholder="请输入文章标题" style="width: 500px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="文章内容" prop="content">
            <editor v-model="form.content" style="height: 600px"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="padding-top: 26px">
          <el-form-item label="允许评论" prop="comment">
            <el-radio-group v-model="form.comment">
              <el-radio
                v-for="dict in dict.type.cms_article_comment"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="允许订阅" prop="subscribe">
            <el-radio-group v-model="form.subscribe">
              <el-radio
                v-for="dict in dict.type.cms_article_subscribe"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发布状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.cms_article_status"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-left:90px;margin-top: -20px">
      <el-button type="primary" @click="saveArticle">保存</el-button>
    </div>
  </div>
</template>

<script>
import {getArchives,updateArchives,saveArchives} from "@/api/cms/article";
import {getCategoryList} from "@/api/cms/demo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "articleAdd",
  dicts: ['cms_article_properties','cms_article_comment','cms_article_subscribe','cms_article_status'],
  components: { Treeselect },
  data(){
    return {
      query:{
        id: '',
        categoryId: ''
      },
      categoryOptions: [],
      form: {
        weight: 0,
        clicks: 0,
        status: '1',
        subscribe: '1',
        comment: '0'
      },
      pross: [],
      rules: {

      },
    }
  },
  created() {
    this.query.id = this.$route.query.id;
    this.query.categoryId = this.$route.query.categoryId;
    this.form.categoryId = this.query.categoryId;
    this.getArticle();
    this.getTreeselect()
  },
  methods: {
    getTreeselect() {
      getCategoryList().then(response => {
        this.categoryOptions = [];
        const category = { id: '-1', cnname: '顶级栏目', children: [] };
        category.children = this.handleTree(response.data, "id");
        this.categoryOptions.push(category);
      });
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.cnname,
        children: node.children
      };
    },
    saveArticle(){
      this.form.properties = '';
      if(this.pross.length!=0 ) {
        for (let i = 0; i < this.pross.length; i++) {
          this.form.properties += this.pross[i] + ',';
        }
      }
      console.log(this.form)
      if(this.form.id==undefined || this.form.id==''){
        saveArchives(this.form).then(res=>{
          if(res.code==200){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          }
        })
      }else{
        updateArchives(this.form).then(response=>{
          if(response.code==200){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      }
    },
    getArticle(){
      if(this.query.id == undefined){
        return;
      }
      getArchives(this.query).then(response=>{
        this.form = response.data;
        this.form.status = ""+response.data.status;
        this.form.subscribe = ""+response.data.subscribe;
        this.form.comment = ""+response.data.comment;
        this.form.properties = response.data.properties ==undefined?"":response.data.properties
        this.pross = this.form.properties.split(",");
        console.log(this.form);
      });
    }
  }
}
</script>

<style scoped>

</style>
